<#assign ctx = request.contextPath />
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>${Func.getLanguage("views_memberApply_apply_title","${language}")?if_exists}</title>
		<link rel="shortcut icon" type="image/x-icon" href="${ctx}/assets/img/ezu.png" />
    	<link rel="stylesheet" href="${ctx}/assets/css/bootstrap.css" />
    	<style>
			body, div, ul, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote,button {
				font-size:15px;
			}
		</style>
	</head>
	
	<body>
		<div class="container-fluid">
  			<div class="row">
            	<div class="col-lg-7" style="float:center;margin:0 auto;">
            		<form id="submit_form" class="form-horizontal" role="form">
            		  <hr/>
					  <div class="form-group form-group-lg">
					    <label class="col-sm-2 control-label"><font color="red">* </font>${Func.getLanguage("views_memberApply_apply_name","${language}")?if_exists}</label>
					    <div class="col-sm-10">
					      <input class="form-control" type="text" id="name" name="name" required placeholder="">
					    </div>
					  </div>
					  <hr/>
					  <div class="form-group form-group-lg">
					    <label class="col-sm-2 control-label"><font color="red">* </font>${Func.getLanguage("views_memberApply_apply_phone","${language}")?if_exists}</label>
					    <div class="col-sm-10">
					      <input class="form-control" type="text" id="phone" name="phone" required placeholder="">
					    </div>
					  </div>
					  <hr/>
					  <div class="form-group">
					  	<label class="col-sm-2 control-label">${Func.getLanguage("views_memberApply_apply_type","${language}")?if_exists}</label>
					    <div class="col-sm-10">
					      <div class="radio">
					        <label>
					          <input type="radio" name="type" value="0" checked="checked"> 个人
					        </label>
					        <label>
					          <input type="radio" name="type" value="1"> ${Func.getLanguage("views_memberApply_apply_type_company","${language}")?if_exists}
					        </label>
					      </div>
					    </div>
					  </div>
					  <hr/>
					  
					  <div id="agencyName_div" style="display:none;">
						  <div class="form-group form-group-lg">
						    <label class="col-sm-2 control-label"><font color="red">* </font>${Func.getLanguage("views_memberApply_apply_agencyName","${language}")?if_exists}</label>
						    <div class="col-sm-10">
						      <input class="form-control" type="text" id="agencyName" name="agencyName" placeholder="">
						    </div>
						  </div>
						  <hr/>
					  </div>
					  
					  <div class="form-group form-group-lg">
					    <label class="col-sm-2 control-label"><font color="red">* </font>${Func.getLanguage("views_memberApply_apply_email","${language}")?if_exists}</label>
					    <div class="col-sm-10">
					      <input class="form-control" type="text" id="email" name="email" required placeholder="">
					    </div>
					  </div>
					  <hr/>
					  <div class="form-group">
					    <label class="col-sm-2 control-label">${Func.getLanguage("views_memberApply_apply_memo","${language}")?if_exists}</label>
					    <div class="col-sm-10">
					      <textarea class="form-control" rows="3" id="memo" name="memo"></textarea>
					    </div>
					  </div>
					  <hr/>
					  <div class="form-group">
					    <div class="col-sm-12">
					      <button type="button" id="submit_button" class="btn btn-primary btn-lg btn-block">${Func.getLanguage("views_memberApply_apply_submit_button","${language}")?if_exists}</button>
					    </div>
					  </div>
					  	
					</form>
					
					<#if content?? && (content?length>0)>
						<div class="well">
							${content}
						</div>
					</#if>
					
            	</div>
            </div>
    	</div>
    	
    	<div id="dialog_Info" class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
		  <div class="modal-dialog modal-sm">
		    <div class="modal-content">
		      <div class="modal-header">
		        <button type="button" class="close close_modal" data-dismiss="modal" aria-hidden="true">&times;</button>
		        <h4 class="modal-title">${Func.getLanguage("views_memberApply_apply_modal_title","${language}")?if_exists}</h4>
		      </div>
		      <div class="modal-body">
		      	<div>
		      		<center id="Info"></center>
		      	</div>
		      </div>
		    </div>
		  </div>
		</div>

	</body>
	
	<script src="${ctx}/assets/js/jquery-1.11.0.min.js"></script>
    <script src="${ctx}/assets/js/bootstrap.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
		
			var hassubmit=false;
			
			$("#submit_button").click(function(){
			    	
		    	if(hassubmit){
					return false;
				}
			  
		    	if($.trim($("#name").val())==''){
		    		$("#Info").html("${Func.getLanguage("views_memberApply_apply_name_error","${language}")?if_exists}");
		    		$('#dialog_Info').modal();
		    		return false;
		    	}
		    	
		    	if($.trim($("#phone").val())==''){
		    		$("#Info").html("${Func.getLanguage("views_memberApply_apply_phone_empty_error","${language}")?if_exists}");
		    		$('#dialog_Info').modal();
		    		return false;
		    	}
		    	
		    	var isphone=/^\+?\d{3,13}(\-?(\d{6,8}?))?(\-?(\d{4,8}?))*$/; 
				if (!isphone.test($("#phone").val())){
					$("#Info").html("${Func.getLanguage("views_memberApply_apply_phone_format_error","${language}")?if_exists}");
		    		$('#dialog_Info').modal();
					return false;
				}
				
				if($('input[name=type]:checked').val()=="1" && $.trim($("#agencyName").val())==''){
					$("#Info").html("${Func.getLanguage("views_memberApply_apply_agencyName_error","${language}")?if_exists}");
		    		$('#dialog_Info').modal();
		    		return false;
				}
				
				if($.trim($("#email").val())==''){
					$("#Info").html("${Func.getLanguage("views_memberApply_apply_email_empty_error","${language}")?if_exists}");
		    		$('#dialog_Info').modal();
		    		return false;
		    	}
		    	
		    	var isemail=/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
				if (!isemail.test($("#email").val())){
					$("#Info").html("${Func.getLanguage("views_memberApply_apply_email_format_error","${language}")?if_exists}");
		    		$('#dialog_Info').modal();
					return false;
				}
		    	
		    	hassubmit=true;
				
				$.post("${ctx}/member/api/rest/v3/memberApply",$('#submit_form').serialize(),function(data){
			        if(data.success){
			        	$("#Info").html("${Func.getLanguage("views_memberApply_apply_success","${language}")?if_exists}");
		    			$('#dialog_Info').modal();
		    			setTimeout(function(){
			    			app.back();
			    		}, 1000);
			        } else {
			        	$("#Info").html(data.message);
		    			$('#dialog_Info').modal();
			            hassubmit=false;
			        }
				},'json');
		    	
			});
			
			$('input[name=type]').change(function(){
			 	if($(this).val()=="1"){
			 		$("#agencyName_div").slideDown();
			 	}
			 	else{
			 		$("#agencyName_div").slideUp();
			 	}
			});
				
		});
	</script>
</html>
